<template>
  <div style="background:#F0F0F0;height:100%;">
    <div style="height:10px;"></div>
    <div class='go-center'>
      <div class="card-box">
        <div class="card-fetch">
          <div class="card-left-bar">
            <p style="height:20px;">取</p>
            <p style="height:20px;">餐</p>
            <p style="height:20px;">号</p>
          </div>
        </div>
        <div>
          <div class='go-top-10'>
            <label class='number-card'>{{order.foot_num}}</label>
            <label class='statu-card'>新订单</label>
          </div>
          <div class='note-card'>
            感谢您的品尝
          </div>
        </div>
      </div>
    </div>
    <!-- 订单详情 -->
    <div class='order-info'>
      <div class='order-info-detail'>订单详情</div>
      <div
        class='cart-list-box'
        v-for="(item,index) in order.order_items"
        :key="index"
      >
        <div class='list-info'>
          <div>{{item.product_name}}</div>
          <div class='list-info-size'>{{item.detail}}</div>
        </div>
        <div style='width:20%;'>
          <div style='height:50px;line-height:50px;text-align:center;'>
            <div>¥ {{item.sum_monney/100}}</div>
          </div>
        </div>
        <div style='width:20%;'>
          <div style='height:50px;line-height:50px;text-align:center;float:right;padding-right:12px;'>
            <div>x {{item.num}}</div>
          </div>
        </div>
      </div>
      <div class='order-sum'>
        <label>优惠：￥ {{order.discount_amount/100}}</label>
        <label class='order-sum-number'>实付：￥ {{order.pay_amount/100}}</label>
      </div>
    </div>
    <div class='order-info'>
      <div class='order-info-top'>订单信息</div>
      <!-- <div class='order-info-title'>订单信息 -->
      <!-- <span style='color:black;margin-left:10px;'>{{order.order_no}}</span> -->
      <!-- </div> -->
      <div class='order-info-title'>订单编号
        <span style='color:black;margin-left:10px;'>{{order.order_no}}</span>
      </div>
      <div class='order-info-title'>下单时间
        <span style='color:black;margin-left:10px;'>{{order.paid_at}}</span>
      </div>
      <div class='order-info-title'>门店地址
        <span style='color:black;margin-left:10px;'>{{order.shop_addr}}</span>
      </div>
      <div class='order-info-title'>门店电话
        <span style='color:black;margin-left:10px;'>{{order.shop_tel}}</span>
      </div>
      <div
        class='order-info-title'
        style="border:none;"
      >备注信息
        <span style='color:black;margin-left:10px;'>{{order.remark}}</span>
      </div>
    </div>
    <div style="text-align:center;">
      <div class='note-center'>可凭此画面取餐号至门店柜台取餐</div>
    </div>
    <button
      open-type="share"
      type="primary"
      v-if="is_show"
      style="margin:0px 20px 20px 20px;"
    >分享领红包</button>
  </div>
</template>

<script>
import api from "@/utils/api";
import { formatTime } from "@/utils/index";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      order: {
        foot_num: "",
        order_items: [],
        discount_amount: "",
        pay_amount: "",
        order_no: "",
        paid_at: "",
        shop_addr: "",
        shop_tel: ""
      },
      is_show: false
    };
  },
  computed: {
    ...mapGetters([])
  },
  onShareAppMessage(res) {
    return {
      title: "分享礼包",
      path: "/pages/user/share_coupon?order_id=" + this.order.id,
      imageUrl: "../../static/assets/red_package.jpg"
    };
  },
  methods: {
    handleOrderItems(order_items) {
      let product_items = [];
      order_items.forEach(item => {
        let detail = "";
        let sum_monney = item.price;
        if (item.product_attrs) {
          item.product_attrs.forEach((attr, index) => {
            if (index == 0) {
              detail = attr.name;
            } else {
              detail = detail + "+" + attr.name;
            }
            sum_monney += attr.price;
          });
        }

        let product_item = {
          product_name: item.product_name,
          detail: detail,
          sum_monney: sum_monney,
          num: item.num
        };
        product_items.push(product_item);
      });
      return product_items;
    }
  },
  onLoad(options) {
    let order = {
      foot_num: "",
      order_items: [],
      discount_amount: "",
      pay_amount: "",
      order_no: "",
      paid_at: "",
      shop_addr: "",
      shop_tel: ""
    };
    let order_id = options.order_id;
    console.log("order_id=>", order_id);
    api.getOrder({ id: order_id }).then(result => {
      if (result.code == 0) {
        console.log("result=>", result);
        result.data.order_items = this.handleOrderItems(
          result.data.order_items
        );
        result.data.paid_at = formatTime(result.data.paid_at);
        this.order = result.data;
      }
    });

    api.getShareByOrderId({ order_id: order_id }).then(res => {
      if (res.code == 0) {
        this.is_show = true;
      }else{
        this.is_show = false;
      }
    });
  }
  /*async onLoad (options) {
    let order = {
      foot_num:'',
      order_items:[],
      discount_amount:'',
      pay_amount:'',
      order_no:'',
      paid_at:'',
      shop_addr:'',
      shop_tel:''
    }
    let order_id = options.order_id
    console.log('order_id=>',order_id)
    let result = await api.getOrder({id:order_id})
    if (result.code == 0) {
      console.log('result=>',result)
      result.data.order_items = this.handleOrderItems(result.data.order_items)
      result.data.paid_at = formatTime(result.data.paid_at)
      this.order = result.data
    }
  }*/
};
</script>

<style>
page {
  background: #f0f0f0;
}
.card-fetch {
  width: 50px;
  background: #de5f4b;
  height: 100px;
  font-size: 17px;
  color: white;
}
.card-box {
  display: flex;
  width: 100%;
  height: 100px;
  background: #fef9f4;
}
.card-left-bar {
  padding-top: 15px;
  width: 50px;
  text-align: center;
}
.order-info {
  background: white;
  margin-top: 10px;
}
.order-info-top {
  font-size: 15px;
  color: #bdbdbd;
  height: 30px;
  line-height: 30px;
  margin: 0px 10px;
  border-bottom: 1px #e3e3e3 solid;
}
.order-info-title {
  font-size: 15px;
  color: #bdbdbd;
  height: 40px;
  line-height: 40px;
  margin: 0px 10px;
  /* margin-left: 10px; */
  border-bottom: 1px #e3e3e3 solid;
}
.note-card {
  margin-left: 20px;
  color: #a2a1a0;
  font-size: 15px;
  margin-top: 10px;
}
.statu-card {
  font-size: 16px;
  color: #ff9c35;
}
.number-card {
  font-size: 30px;
  padding: 0px 10px 0px 30px;
}
.go-top-10 {
  margin-top: 10px;
}
.go-center {
  width: 90%;
  text-align: center;
  margin: 0px auto;
  color: red;
  border-radius: 5px;
}
.note-center {
  display: inline-block;
  margin: 20px auto;
  border: 1px solid #ffd700;
  border-radius: 5px;
  padding: 5px 10px;
  color: #ff7f00;
}
.btn-center {
  display: inline-block;
  margin: 20px auto;
  border: 1px solid red;
  border-radius: 5px;
  padding: 5px 10px;
  color: red;
}
.cart-list-box {
  background: #ffffff;
  display: flex;
  font-size: 15px;
  height: 60px;
  border-bottom: 1px #e3e3e3 solid;
}
.list-info {
  width: 60%;
  padding: 5px 12px;
}
.list-info-size {
  padding-top: 10px;
  color: #b1b1b1;
}
.order-info-detail {
  font-size: 15px;
  color: #bdbdbd;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  border-bottom: 1px #e3e3e3 solid;
}
.order-sum {
  height: 30px;
  line-height: 30px;
  padding: 5px 12px;
  font-size: 15px;
}
.order-sum-number {
  font-size: 15px;
  float: right;
}
</style>
